<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="推荐"></custom-nav-bar>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" 
			indicator-active-color="#fff" autoplay>
			<!-- 修改id -->
				<swiper-item v-for="item in bannerList" :key="item.id">
					<image :src="`${BASE_URL}${item.imgUrl}`" mode="aspectFill"></image>
				</swiper-item>				
			</swiper>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<!-- 小喇叭 -->
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<!-- 文字 -->
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="item in noticeList" :key="item.id">
						<!-- 跳转到指定的位置 -->
						<!-- 写成死数据，不可以跳转 -->
						<view>{{ item.content }}</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 右边的小箭头 -->
		</view>
		<!-- 每日推荐 -->
		<view class="select">
			<common-title>
				<!-- 引用组件中的name格式 -->
				<template #name>每日推荐</template>
				<!-- 右边小组件显示日期 -->
				<template #custom>
					<view class="date">
						<!-- 日期图标 -->
						<uni-icons type="calendar" size="18"></uni-icons>
						<!-- 获取当前日期 -->
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>							
						</view>						
					</view>
				</template>
			</common-title>
			<!-- 展示下面每日推荐的内容 -->
			<view class="content">
				<!-- scroll-x水平滚动 -->
				<scroll-view scroll-x>
					<!-- 这里调用点击函数可以直接跳转到小说的界面 -->
					<view class="box" v-for="item in randomList" :key="item.novelId" 
					@click="goPreview(item.novelId)">	
						<!-- 是js格式的时候使用：src，静态使用src -->
						<image :src="`${BASE_URL}${item.coverImage}`" mode="aspectFill"></image>
						<text class="book-title">{{ item.title }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 专题精选 -->
		<view class="theme">
			<common-title>
				<template #name>专题精选</template>
				<template #custom>
					<!-- 右边小组件，绑定跳转事件，直接跳转到分类主界面 -->
					<navigator url="/pages/classify/classify" open-type="reLaunch" class="more">More+</navigator>
				</template>
			</common-title>
			<!-- 下面展示部分分类 -->
			<view class="content">
				<theme-item v-for="item in classifyList" 
				:key="item.tagId"
				:item="item"
				></theme-item>
				<!-- 最后一个显示更多 -->
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {apiGetBanner,apiGetDayRandom,apiGetNotice,apiGetClassify} from "@/api/apis.js"
import { BASE_URL } from '@/utils/request.js'

const bannerList= ref([]);
const randomList = ref([]);
const noticeList = ref([]);
const classifyList = ref([]);

const getBanner = async ()=>{
	let res =await apiGetBanner();	
	bannerList.value = res.data;
}

const getDayRandom = async ()=>{
	let res =await apiGetDayRandom();
	randomList.value = res.data	
}

const getNotice = async()=>{
	let res = await apiGetNotice();
	noticeList.value = res.data
}
const getClassify =async()=>{
	let res =await apiGetClassify({
		showAllTags:false
	});
	classifyList.value = res.data
}

//跳转到预览页面
// 修改:直接跳转到小说的浏览界面
const goPreview = (id)=>{
	uni.setStorageSync("storgClassList",randomList.value);
	uni.navigateTo({
		url:"/pages/book/book?novelId="+id+"&fromPage=index"
	})	
}

getBanner();
getDayRandom();
getNotice();
getClassify();
</script>

<style lang="scss" scoped>
.homeLayout{
	.banner{
		width: 850rpx;
		padding:30rpx 0;
		swiper{
			width: 750rpx;
			height: 340rpx;
			&-item{
				width: 100%;
				height: 100%;
				display: flex; /* 使用flex布局 */
				justify-content: center; /* 水平居中 */
				align-items: center; /* 垂直居中 */
				padding: 0 30rpx;
			}
		}
	}
	.notice{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			:deep(){
				.uni-icons{
					color:$brand-theme-color !important;
				}
			}			
			.text{
				color:$brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
		.center{
			flex:1;
			swiper{
				height: 100%;
				&-item{
					height: 100%;
					font-size: 25rpx;
					color:#666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.select{
		padding-top:50rpx;
		.date{
			color:$brand-theme-color;
			display: flex;
			align-items: center;
			:deep(){
				.uni-icons{
					color:$brand-theme-color !important;
				}
			}	
			.text{
				margin-left:5rpx;
			}
		}
		.content{
			width: 720rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			scroll-view{
				white-space: nowrap;
				.box {
				    width: 200rpx;
				    height: 450rpx;
				    display: inline-block;
				    margin-right: 15rpx;
				    padding: 10rpx;
				    background-color: #f8f8f8;
				    border-radius: 10rpx;
				    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
					image {
					    width: 100%;
					    height: 80%;
					    border-radius: 15rpx;
						margin-bottom: 10rpx;
					}
					.book-title {
						display: flex;
					    margin-top: 10rpx;
					    font-family: '微软雅黑', sans-serif;
					    font-size: 24rpx;
					    font-weight: bold;
					    color: #333;
					    text-align: center;
					}
				}
				.box:last-child{
					margin-right: 30rpx;
				}
			}
		}
	}
	.theme{
		padding:50rpx 0;
		.more{
			font-size: 32rpx;
			color:#888;
			
		}
		.content{
			margin-top:30rpx;
			padding:0 30rpx;
			display: grid;
			gap:15rpx;
			grid-template-columns: repeat(3,1fr);
		}
	}
}
</style>
